
.ellipsis, .ellipsis1, .ellipsis2, .ellipsis3 {
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  overflow: hidden;
  display: -webkit-box;
}

.ellipsis1 {
  -webkit-line-clamp: 1;
}

.ellipsis2 {
  -webkit-line-clamp: 2;
}

.ellipsis3 {
  -webkit-line-clamp: 3;
}

.text-nowrap {
  white-space: nowrap;
}

.text-wrap {
  word-wrap: break-word;
}

/**flex layout*/
/**http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html*/
.flex-box {
  display: -webkit-flex; /* Safari */
  display: flex;
  /**布局方式**/
  &.flex-direction {
    &-row {
      flex-direction: row;
    }
    &-row-reverse {
      flex-direction: row-reverse;
    }
    &-column {
      flex-direction: column;
    }
    &-column-reverse {
      flex-direction: column-reverse;
    }
  }
  /**换行**/
  &.flex-wrap {
    &-nowrap {
      flex-wrap: nowrap;
    }
    &-wrap {
      flex-wrap: wrap;
    }
    &-wrap-reverse {
      flex-wrap: wrap-reverse;
    }
  }
  /**横向对齐**/
  &.justify-content {
    &-start {
      justify-content: flex-start;
    }
    &-end {
      justify-content: flex-end;
    }
    &-center {
      justify-content: center;
    }
    &-space-between {
      justify-content: space-between;
    }
    &-space-around {
      justify-content: space-around;
    }
  }
  /**纵向对齐**/
  &.align-items {
    &-start {
      align-items: flex-start;
    }
    &-end {
      align-items: flex-end;
    }
    &-center {
      align-items: center;
    }
    &-baseline {
      align-items: baseline;
    }
    &-stretch {
      align-items: stretch;
    }
  }
  /**多根轴线的对齐方式**/
  &.align-content {
    &-start {
      align-content: flex-start;
    }
    &-end {
      align-content: flex-end;
    }
    &-center {
      align-content: center;
    }
    &-space-between {
      align-content: space-between;
    }
    &-space-around {
      align-content: space-around;
    }
  }
  /**order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0**/
  .flex-order {
    &--1 {
      order: -1;
    }
    &-0 {
      order: 0;
    }
    &-1 {
      order: 1;
    }
    &-2 {
      order: 2;
    }
    &-3 {
      order: 3;
    }
    &-4 {
      order: 4;
    }
  }
  /**flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大**/
  .flex-grow {
    &-0 {
      flex-grow: 0;
    }
    &-1 {
      flex-grow: 1;
    }
    &-2 {
      flex-grow: 2;
    }
    &-3 {
      flex-grow: 3;
    }
    &-4 {
      flex-grow: 4;
    }
    &-5 {
      flex-grow: 5;
    }
  }
  /**flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。**/
  .flex-shrink {
    &-0 {
      flex-shrink: 0;
    }
    &-1 {
      flex-shrink: 1;
    }
    &-2 {
      flex-shrink: 2;
    }
    &-3 {
      flex-shrink: 3;
    }
    &-4 {
      flex-shrink: 4;
    }
    &-5 {
      flex-shrink: 5;
    }
  }
  /**align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch**/
  .item-align-self {
    &-start {
      align-self: flex-start;
    }
    &-end {
      align-self: flex-end;
    }
    &-center {
      align-self: center;
    }
    &-baseline {
      align-self: baseline;
    }
    &-stretch {
      align-self: stretch;
    }
  }
}

.color {
  &-warn {
    color: #f04134;
  }
  &-script {
    color: #999;
  }
}
